<template>
  <div class="container">
    <el-page-header @back="goBack" content="我的账户"></el-page-header>

    <el-row type="flex" justify="space-between" class="nav-bar">
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-plus" plain @click="create">新建账户</el-button>
      </el-col>
      <el-col class="text-right">
        <el-form :inline="true" label-width="auto" class="nav-bar-form">
          <el-form-item>
            <el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search" @clear="getList">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column fixed prop="type" label="账号类型" width="100">
      </el-table-column>
      <el-table-column prop="accountnumber" label="银行账号">
      </el-table-column>
      <el-table-column prop="bankaccount" label="开户行">
        <template slot-scope="scope">
          <span>{{ scope.row.bankaccount?scope.row.bankaccount:'--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bankname" label="户名">
        <template slot-scope="scope">
          <span>{{ scope.row.bankname?scope.row.bankname:'--' }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="state" label="状态" width="200">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已启用'">{{ scope.row.state }}</span>
					<span class="color-danger" v-if="scope.row.state == '已隐藏'">{{ scope.row.state }}</span>
				</template>
			</el-table-column> -->
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <!-- <el-button @click="view(scope.row)" type="text" size="small">查看</el-button> -->
          <el-button @click="edit(scope.row)" type="text" size="small" v-if="scope.row.type == '银行账户'">编辑</el-button>
          <el-button @click="del(scope.row.id)" type="text" size="small" v-if="scope.row.type == '银行账户'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <el-dialog :title="dialogType == 'add' ? '新建账号' : '编辑账号'" :visible.sync="dialogVisible" width="500px" @close='closedialog'>
      <el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm" :rules="rules">
        <!-- <el-form-item label="账号类型" prop="payway">
          <el-select v-model="form.payway" placeholder="请选择">
            <el-option v-for="item in paywayList" :key="item.value" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="账号号码" prop="accountnumber">
          <el-input v-model="form.accountnumber" oninput = "value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model="form.bankaccount" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="户名">
          <el-input v-model="form.bankname" maxlength="50"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedialog">取消</el-button>
        <el-button type="primary" @click="submitType">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="详情"
      :visible.sync="myview"
      width="500px"
      >
      <el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm" >

        <el-form-item label="账号类型" >
          <el-input disabled v-model="form.payway" oninput = "value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="50"></el-input>
        </el-form-item>
        <!-- <el-form-item label="账号类型" prop="payway">
          <el-select v-model="form.payway" placeholder="请选择">
            <el-option v-for="item in paywayList" :key="item.value" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="账号" >
          <el-input disabled v-model="form.accountnumber" oninput = "value=value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input disabled v-model="form.bankaccount" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="户名">
          <el-input disabled v-model="form.bankname" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="支出金额">
          <el-input disabled v-model="form.outamount" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="收入金额">
          <el-input disabled v-model="form.inamount" maxlength="50"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="myview = false">取 消</el-button>
        <el-button type="primary" @click="myview = false">确 定</el-button>
      </span>
    </el-dialog>
      </div>
</template>

<script>
  export default {
    layout: 'admin',
    head() {
      return {
        title: '银行账号-' + this.websetting.name
      }
    },
    data() {
      return {
        key: '',
        page: 1,
        pageSize: 10,
        loading: false,
        total: 0,
        dialogVisible: false,
        myview:false,
        dialogType: 'add',
        paywayList: [{
            name: '微信',
            value: '5'
          },
          {
            name: '支付宝',
            value: '4'
          },
          {
            name: '银行账户',
            value: '3'
          },
          {
            name: '现金',
            value: '2'
          },
          {
            name: '其他',
            value: '1'
          }
        ],
        form: {
          payway: '',
          bankaccount: '',
          bankname: '',
          accountnumber: ''
        },
        tableData: [],
        rules: {
          accountnumber: [{
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          payway: [{
            required: true,
            message: '请选择账号类型',
            trigger: 'change'
          }],
        }
      }
    },
    watch: {
      dialogVisible(value) {
        if (!value) {
          this.form = {
            payway: '',
            bankaccount: '',
            bankname: '',
            accountnumber: ''
          }
        }
      },
      myview(value) {
        if (!value) {
          this.form = {
            payway: '',
            bankaccount: '',
            bankname: '',
            accountnumber: '',
            inamount:'',
            outamount:"",

          }
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      view(row){
        console.log(row)
        this.myview = true
        // this.form.id = row.id
       
        this.$axios.get(`/Operator/Account/Views?Id=${row.id}`, {
        }).then((res) => {
          console.log(res)

        this.form.payway = res.payway
        this.form.bankaccount = res.bankaccount
        this.form.bankname = res.bankname
        this.form.accountnumber = res.accountnumber
        this.form.inamount= res.inamount
        this.form.outamount  = res.outamount

        
        })
      },
      closedialog(){
        this.dialogVisible = false;
        this.$refs.form.clearValidate();
      },
      goBack() {
        this.$router.go(-1)
      },
      getList() {
        this.$axios.post('/Operator/Account/List', {
          "PageIndex": this.page,
          "PageSize": this.pageSize,
          "Key": this.key
        }).then((res) => {
          this.tableData = res;
        })
      },
      submitType() {
        let api = ''
        if (this.dialogType == 'add') {
          api = '/Operator/Account/create'
        }
        if (this.dialogType == 'edit') {
          api = '/Operator/Account/edit'
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$axios.post(api, this.form).then((res) => {
              this.$message.success(res.msg);
              this.dialogVisible = false;
              this.getList()
            })
          } else {
            return false;

          }
        });

      },
      create() {
        this.dialogType = 'add'
        this.dialogVisible = true
      },
      edit(row) {
        console.log(row)
        this.dialogType = 'edit'
        this.dialogVisible = true
        this.form.id = row.id
        this.form.payway = row.payway
        this.form.bankaccount = row.bankaccount
        this.form.bankname = row.bankname
        this.form.accountnumber = row.accountnumber
      },
      search() {
        this.getList()
      },
      pageChange(e) { // 页码切换事件
        this.page = e;
        this.getList()
      },
      handleSizeChange(val) {
        this.page = 1;
        this.pageSize = val;
        this.getList()
      },
      del(id) {
        this.$confirm('此操作将删除该银行账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get('/Operator/Account/delete?Id=' + id).then((res) => {
            this.$message.success(res.msg);
            this.getList()
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .nav-bar {
    padding: 45px 0 0;
  }

  .send {
    margin-top: 15px;
    margin-right: 10px;
  }

  .dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      width: 50%;
      float: left;

      &.all {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }
    }
  }
</style>
